<template>
	<view class="container my-page">
		<!-- 顶部导航栏 -->
<!-- 		<view class="nav-bar">
			<view class="title">个人中心</view>
		</view> -->
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="avatar">
			  <image 
				:src="(userInfo.sex == 1 ? '/static/my/woman.png' : '/static/my/man.png')" 
				mode="aspectFill">
			  </image>
			</view>
			<view class="info">
				<text class="nickname">{{userInfo.nickName || '未设置昵称'}}</text>
				<text class="id">账号: {{userInfo.userName || '--'}}</text>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item.path)">
				<view class="left">
					<u-icon :name="item.icon" size="30" color="#666"></u-icon>
					<text class="title">{{item.title}}</text>
				</view>
				<!-- 如果有排名信息，则显示 -->
				<text class="menu-rank" v-if="item.rank">{{ item.rank }}</text>
				<u-icon name="arrow-right" size="28" color="#999"></u-icon>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="handleLogout">
			<text>退出登录</text>
		</view>
		
		<!-- 自定义tabBar -->
		<custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
	</view>
</template>

<script>
	import request from '@/util/request'//登录有关
	import { getStrokeUserInfo } from '@/common/api.js'
	export default {
		data() {
			return {
				showCustomTabBar: true, // 显示自定义TabBar
				userInfo: {
					avatar: '',
					nickname: '',
					userId: ''
				},
				menuList: [
				{
					title: '个人信息',
					icon: '/static/my/userInfo.png',
					path: '/pages/my/info'
				},/* {
					title: '健康指标',
					icon: 'star',
					path: '/pages/my/healthIndicator'
				}, */ {
					title: '健康指标记录',
					icon: '/static/my/healthHistory.png',
					path: '/pages/my/metrics'
				},{
					title: '系统可用性评价',
					icon: '/static/my/useable.png',
					path: '/pages/my/usability'
				},  {
					title: '意见反馈',
					icon: '/static/my/feedback.png',
					path: '/pages/my/feedback'  
				}, {
					title: '咨询室',
					icon: '/static/my/consult.png',
					path: '/pages/consultation/index'
				}, {
					title: '排行榜',
					icon: '/static/my/rank.png',
					path: '/pages/my/ranking'
				}/* , {
					title: '健康指标',
					icon: 'calendar',
					path: '/pages/my/health'
				} */]
			}
		},
		onLoad() {
			// 隐藏原生TabBar
			uni.hideTabBar();
			  uni.$on('page-show', () => {
			    if (!this.shouldUpdate) return;
			    this.updateTabBar();
			  });
		},
		onShow() {
			this.loadStrokeUserInfo();
			//uni.$emit('page-show'); 
		},
		methods: {
			async loadStrokeUserInfo(){
				try {
				  const uRes = await getStrokeUserInfo();
				  this.userInfo = uRes.data;
				  console.log(this.userInfo);
				} catch (e) {
				  console.error('加载用户信息失败', e);
				}
			},
			handleMenuClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			async handleLogout() {
				try{
					const res = await new Promise((resolve) => {
						uni.showModal({
							title: '提示',
							content: '确定要退出登录吗？',
							success: (res) => resolve(res),
							fail: (err) => resolve(err)
						})
					})
					
				    if (res.confirm) {
				      // await request.post('/auth/logout')
					  await uni.$u.http.post('/auth/logout')
					  // 清除用户信息和token
					  uni.removeStorageSync('userInfo')
					  uni.removeStorageSync('token')
					  //清除全局userRole
					  const app = getApp();
					  if(app && app.globalData){
					  	app.globalData.userRole = this.selectedRole;
					  }
				      // 跳转到登录页
				      uni.reLaunch({
				        url: '/pages/login/login'
				      })
				    }
				  } catch (error) {
						console.error('退出登录失败:', error)
						uni.showToast({
							title: '退出登录失败，请重试',
							icon: 'none'
						})
				  }
			}
		}
	}
</script>

<style lang="scss">
	.container.my-page {
		min-height: 100vh;
		background-color: #F7F7FA;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom)) !important;
		
		.nav-bar {
			background-color: #fff;
			padding: 20rpx 30rpx;
			text-align: center;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.user-card {
			margin: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 40rpx;
			display: flex;
			align-items: center;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				overflow: hidden;
				margin-right: 30rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.info {
				flex: 1;
				
				.nickname {
					font-size: 35rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.id {
					font-size: 27rpx;
					color: #999;
				}
			}
		}
		
		.menu-list {
			margin: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			
			.menu-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid #f5f5f5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.left {
					display: flex;
					align-items: center;
					
					.title {
						font-size: 32rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
			}
		}
		
		.logout-btn {
			margin: 60rpx 30rpx;
			height: 88rpx;
			background-color: #ff4d4f;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			text {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style> 